<template>
  <div class="blog-home">
    <header class="blog-home-header">
      <h2 class="blog-home-header-title">Home</h2>
    </header>
    <main>
      <section class="blog-home-cards">
        <div class="blog-home-cards-item" v-for="item in cards" :key="item.id">
          <h3 class="blog-home-cards-item-title">
            <img class="icon" :src="getImageUrl(item.icon)" alt="" />
            <span>{{ item.title }}</span>
          </h3>
          <div class="blog-home-cards-item-content">
            <div
              class="blog-home-cards-item-content-item"
              v-for="content in item.content"
              :key="content"
            >
              <img class="icon" src="@/assets/images/icon-check.png" alt="" />
              <span>{{ content }}</span>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script lang="ts" setup>
// script
import { ref } from 'vue';

// 使用动态导入获取图片URL
function getImageUrl(name: string) {
  return new URL(`../assets/images/${name}.png`, import.meta.url).href;
}

const cards = ref([
  {
    id: 1,
    title: '技术博客',
    icon: 'icon-article',
    content: ['技术学习记录', '常用工具配置记录', '技术分享', '技术总结']
  },
  {
    id: 2,
    title: '技术栈展示',
    icon: 'icon-terminal',
    content: ['Vue', 'Axios', 'Vuex', 'Openlayer']
  },
  {
    id: 3,
    title: '组件库',
    icon: 'icon-component',
    content: ['Element-Plus', 'Vant', 'Naive UI', '...']
  },
  {
    id: 4,
    title: '大前端',
    icon: 'icon-html5',
    content: ['Vue', 'Taro', 'H5', 'Electron']
  },
  {
    id: 5,
    title: '服务端',
    icon: 'icon-server',
    content: ['Node.js', 'Express', 'Nest.js', '...']
  },
  {
    id: 6,
    title: '数据库',
    icon: 'icon-database',
    content: ['MySQL', 'MongoDB', 'Redis', 'PostgreSQL']
  }
]);
</script>

<style lang="scss" scoped>
.blog-home {
  padding: 0 32px;

  &-header {
    width: 100%;
    height: 88px;
    line-height: 88px;

    &-title {
      font-family: 'Pacifico', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }
  }

  &-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;

    &-item {
      flex: 0 0 calc(50% - 12px);
      height: 230px;
      padding: 25px;
      background:
        linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
        linear-gradient(135deg, #eff6ff 1%, #ffffff 99%);
      border: 1px solid #f3f4f6;
      border-radius: 12px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-color: #e5e7eb;
      }

      &:nth-child(2) {
        background: linear-gradient(135deg, #f0fdf4 2%, #ffffff 100%);
      }

      &:nth-child(3) {
        background: linear-gradient(135deg, #faf5ff 1%, #ffffff 99%);
      }

      &:nth-child(4) {
        background: linear-gradient(135deg, #fefce8 2%, #ffffff 100%);
      }

      &:nth-child(5) {
        background: linear-gradient(135deg, #f1ebf8 2%, #ffffff 100%);
      }

      &:nth-child(6) {
        background: linear-gradient(135deg, #f2f0ff 2%, #ffffff 100%);
      }

      &-title {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        line-height: 28px;
        color: #2c2c2c;
      }

      &-content {
        margin-top: 18px;
        display: flex;
        flex-direction: column;
        gap: 12px;

        &-item {
          height: 24px;
          display: flex;
          align-items: center;
          gap: 6px;
          line-height: 24px;
        }
      }
    }
  }
}
</style>
